<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr><th>商品标题</th><th>价格</th><th>库存</th></tr>
</table>
<script>
  //实例化一个空对象
  let p1={};
  //JS语言支持给对象动态添加属性和方法
  p1.name="蔡徐坤";
  p1.age=12;
  p1.run=function () {
    console.log(this.name+":"+this.age)
  }
  //调用对象的方法
  p1.run();

  //实例化自带属性和方法
  let p2={
    name:"吴亦凡",
    age:14,
    run:function (){
      console.log(this.name+":"+this.age)
    }
  }
  p2.gender="男";//仍可以动态添加属性和方法
  p2.run()

  //通过对象封装数据
  let productArr=[{title:"苹果手机",price:5000,num:100},
    {title:"遥遥领先",price:6999,num:0},
    {title:"vivo",price:6999,num:10},
  ]
  let table=document.querySelector("table")
  //遍历数组
  for (let p of productArr) {
    //创建tr和3个td
    let tr=document.createElement("tr")
    let titleTd=document.createElement("td")
    let priceTd=document.createElement("td")
    let numTD=document.createElement("td")
    //把循环的商品对象里面的数据取出,赋值给每一个rd
    titleTd.innerText=p.title;
    priceTd.innerText=p.price;
    numTD.innerText=p.num;
    //把tr装进td
      tr.append(titleTd,priceTd,numTD)
    //把td装进table
      table.append(tr)
  }
</script>

</body>
</html>